<!--
 * @Author: Neil 1294641898@qq.com
 * @Date: 2022-09-05 17:40:03
 * @LastEditors: Neil 1294641898@qq.com
 * @LastEditTime: 2022-09-05 22:58:14
 * @FilePath: \stupid_home\src\views\device\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class='device'>
    <van-nav-bar
    left-text="返回"
    left-arrow
    @click-left="goBack"
    />
    <h1 style="margin-top:30px">{{group_name}}</h1>
    <van-divider>设备列表</van-divider>

    <van-list
      v-model="loading"
      :finished="finished"
    >
      <div class="detail" @click="()=>selectDevice(item)" v-for="item in list" :key="item.id">
        <div >{{"设备连接状态:"+item.status}}</div>
        <div style="margin-top:10px">{{"设备名称:"+item.name}}</div>
        <div style="margin-top:10px">{{"设备编号:"+item.number}}</div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
      return {
          token: "",
          org_id: "",
          group_id: "",
          group_name: "",
          list: [],
      loading: false,
      finished: false,
        
    };
  },
    methods: {
        //接收分组页面传入的参数
      getRouterData() {
      
    this.token = localStorage.getItem("token")  
    this.org_id = localStorage.getItem("org_id")  
    this.group_id = localStorage.getItem("group_id")  
    this.group_name = localStorage.getItem("group_name")  
    console.log(this.token+" "+this.org_id+" "+this.group_id);
        },
    //返回分组页面，同时销毁本页面
    goBack() {
        this.$destroy();
        this.$router.push('/group')
        },
    async getDeviceInfo() {
        await this.$axios.get(`api/orgs/${this.org_id}/groups/${this.group_id}/devices`, {
        headers: {
          "token":this.token
        }
      }).then(async (res) => {
            console.log(res, "check device");
            this.list = res.data.data
            for (let i = 0; i < this.list.length; i++) {
                await this.$axios.get(`api/orgs/${this.org_id}/devicestate/${this.list[i].id}`,{
                headers: {
                  "token":this.token
                }
              }).then((res) => {
                    console.log(res,"check device status");
                    if (res.data.data == "disconnected") {
                        this.list[i].status="未连接"
                    } else {
                        this.list[i].status="已连接"
                    }
                })
            }
            console.log(this.list,"updated list");
            this.finished=true
        })
        },
    selectDevice(item) {
        console.log(item.name);
        localStorage.setItem("equip_id",item.number)
        localStorage.setItem("equip_name",item.name)
        this.$router.push("/communication")
    }
  },
    mounted() {
        this.getRouterData()
        this.getDeviceInfo()
  }
};
</script>
<style lang="less" scoped>
.device{
    width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  color: #2c3e50;
  .detail{
    text-align: left;
    margin-left:3rem ;
  }
}
</style>